<template>
	<view class="">
		<navView navTitle="开票列表" :titleColor="is_one ? '#fff' : '#333'" :isBack="true"></navView>
		<view class="capsule-box">
			<view class="project-list2" v-for="(project, index) in list" :key="index">
				<view class="project-title" @tap="$navTo('/subpkg/invoice/invoiceDetail?id=' + project.id)">
					<view class="title">
						{{ project.name }}
					</view>
					<view class="right">
						去开票
						<uni-icons type="right" size="22rpx" color="#B0B0B0"></uni-icons>
					</view>
				</view>
				<!-- 循环渲染每个项目 -->
				<view class="project-card">
					<!-- 项目名称和状态 -->
					<!-- 项目名称和状态 -->
					<view class="project-header">
						<text>{{ project.name }}</text>
						<text
							:class="['status-tag', project.invoice_status == 0 ? 'completed' : project.invoice_status == 1 ? 'ongoing' : project.invoice_status == 2 ? 'not-started' : '']">
							{{ project.invoice_status == 0 ? '未开票' : project.invoice_status == 1 ? '部分开票' :
							project.invoice_status == 2 ? '开票完成' : '' }}
						</text>
					</view>
					<view class="contractCode">
						合同编码：{{ project.num }}
					</view>
					<view class="contractCode">
						合同金额：{{ project.total_price }}
					</view>
					<view class="contractCode">
						已开票金额：{{ project.invoiced_amount }}
					</view>
				</view>
			</view>
			<!-- 分页加载状态 -->
			<uni-load-more :status="loadStatus" :content-text="{
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			}" icon-type="circle" />

			<view v-if="!isLoading && list.length === 0" class="no-data-text">
				暂无数据
			</view>
		</view>

	</view>
</template>

<script>
import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more'
export default {
	components: { uniLoadMore },
	data() {
		return {
			list: [],
			isLoading: false,
			// 新增分页相关状态
			currentPage: 1,
			totalPages: 1,
			isNoMore: false,
			loadStatus: 'more' // 新增加载状态
		}
	},
	onLoad() {
		this.getList()
	},
	// 添加页面滚动到底部事件
	onReachBottom() {
		if (!this.isNoMore && !this.isLoading) {
			this.currentPage++;
			this.getList(true);
		}
	},
	methods: {
		getList(isLoadMore = false) {
			if (this.isLoading) return;

			this.isLoading = true;
			this.$request('/addons/qingdong/project/getContractInvoice', 'GET', {
				page: this.currentPage,
				per_page: 5 // 根据接口返回的per_page值设置
			}).then(res => {
				// 如果是加载更多操作就追加数据
				if (isLoadMore) {
					this.list = [...this.list, ...res.data.data];
				} else {
					this.list = res.data.data;
				}

				// 更新分页信息
				this.totalPages = res.data.last_page;
				this.isNoMore = this.currentPage >= this.totalPages;
			}).finally(() => {
				this.isLoading = false;
			});
		}
	}
}
</script>

<style lang="scss">
.no-data-text {
	text-align: center;
	padding: 48rpx 0;
	color: #999;
	font-size: 24rpx;
}

.project-list {
	padding: 20rpx;
}

.topBox {
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 100;

	.input-box {
		background: #008efe;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 60rpx;
		box-sizing: border-box;

		.input {
			background: #fff;
			border-radius: 40rpx;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			input {
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}

		.shai {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.stateList {
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.items {
			font-weight: bold;
			font-size: 30rpx;
			color: #008EFE;
			position: relative;
			padding: 20rpx 0;

			.tiao {
				width: 38rpx;
				height: 4rpx;
				background: #64AFFF;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
				position: absolute;
				bottom: 0rpx;
				left: 50%;
				transform: translate(-50%);
			}
		}

		.item {
			font-size: 30rpx;
			color: #AFAFB2;
			padding: 20rpx 0;
		}
	}
}

.project-card {
	background-color: #fff;
	border-radius: 10rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	padding: 20rpx;
	box-shadow: 0rpx 0rpx 15rpx 0rpx #ccc;

	.project-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;

		text {
			font-size: 32rpx;
			font-weight: bold;
		}

		.status-tag {
			border-radius: 10rpx;
			padding: 6rpx 12rpx;
			font-size: 24rpx;
			font-weight: bold;

			&.completed {
				background-color: rgba(0, 160, 105, 0.1);
				color: #00a069;
			}

			&.ongoing {
				background-color: rgba(0, 122, 255, 0.1);
				color: #007aff;
			}

			&.not-started {
				background-color: rgba(255, 58, 58, 0.1);
				color: #ff3a3a;
			}
		}
	}

	.contractCode {
		font-weight: 400;
		font-size: 24rpx;
		color: #7D7D7D;
		margin-top: 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx dashed #7D7D7D;
	}

	.tab-bar {
		display: flex;
		justify-content: space-between;

		.tab-item {
			width: 20%;
			text-align: center;
			padding: 8rpx 0;
			background-color: #e0f1ff;
			border-radius: 10rpx;
			color: #007aff;
			font-size: 24rpx;
		}
	}


}

.capsule-box {
	padding: 20rpx;
	box-sizing: border-box;

	.project-list2 {
		background-color: #fff;
		box-shadow: 0rpx 0rpx 15rpx 0rpx #ccc;
		border-radius: 16rpx;

		.project-title {
			background: #e5f3fe;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 20rpx;
			border-radius: 16rpx;
			padding-bottom: 40rpx;

			.title {
				font-size: 32rpx;
			}

			.right {
				display: flex;
				align-items: center;
				color: #B0B0B0;
				font-size: 22rpx;
			}
		}

		.project-card:first-child {
			border-radius: 16rpx;
			position: relative;
			margin-top: -16rpx;
			background: #fff;
		}

		.project-card {
			overflow: hidden;
			margin-bottom: 20rpx;
			padding: 20rpx;

			.project-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				text {
					font-size: 32rpx;
					font-weight: bold;
				}

			}

			.contractCode {
				font-weight: 400;
				font-size: 24rpx;
				color: #7D7D7D;
				margin-top: 20rpx;
				padding: 20rpx 0;
				border-top: 1rpx dashed #7D7D7D;
			}

			.tab-bar {
				display: flex;
				justify-content: space-between;

				.tab-item {
					width: 20%;
					text-align: center;
					padding: 8rpx 0;
					background-color: #e0f1ff;
					border-radius: 10rpx;
					color: #007aff;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>